window.addEventListener('load', function() {
    var pro_bar = document.getElementById('pro_bar');
    var start = document.getElementById('start');
    var music = document.querySelector('audio');
    var flag = true;
    var max_time = document.querySelector('.max_time');
    var up_time = document.querySelector('.up_time');
    var vol = document.querySelector('#vol');
    var num = 0;
    // 歌曲点击播放暂停功能
    start.addEventListener('click', function() {
        if (flag) {
            music.play();
            start.innerHTML = '&#xe65f;';
            flag = false;
            $('.round_pointer').css('transform', 'rotate(15deg)');
        } else {
            music.pause();
            start.innerHTML = '&#xe6a4;';
            flag = true;
            $('.round_pointer').css('transform', 'rotate(-15deg)');
        }
    })
    var str = '';

    music.addEventListener('durationchange', function() {
        pro_bar.max = music.duration;

    })

    // timeupdate 当目前的播放位置已更改时触发 更新秒数
    music.addEventListener('timeupdate', function() {
        pro_bar.value = music.currentTime;
        var m = Math.floor(music.currentTime / 60);
        m = m > 9 ? m : '0' + m;
        var s = Math.floor((music.currentTime % 60));
        s = s > 9 ? s : '0' + s;
        str = m + ':' + s;
        up_time.innerText = str;
    })

    // change 事件会在域的内容改变时发生。
    pro_bar.addEventListener('change', function() {
        music.currentTime = pro_bar.value;
    })

    // 音量调节
    vol.addEventListener('change', function() {
        music.volume = vol.value;
    })

    function change() {
        start.innerHTML = '&#xe6a4;';
        music.pause();
        flag = true;
        $('.round_pointer').css('transform', 'rotate(-15deg)');
    }

    function apply(index) {
        $('.music_message h3')[0].innerHTML = musicList.map(function(item) {
            if (item.music_id == index) {
                return '<h3>' + item.music_name + '</h3>';
            }
        }).join('');

        $('.music_message p')[0].innerHTML = musicList.map(function(item) {
            if (item.music_id == index) {
                return "<p>" + item.author + "</p>"
            }
        }).join("");

        $('audio')[0].src = musicList.map(function(item) {
            if (item.music_id == index) {
                return item.music_src;
            }
        }).join('');

        // durationchange 当音频/视频的时长已更改时触发。
        $('.max_time')[0].innerText = musicList.map(function(item) {
            if (item.music_id == index) {
                return item.music_time
            }
        }).join('');

        $('.round_img')[0].src = musicList.map(function(item) {
            if (item.music_id == index) {
                return item.music_img
            }
        }).join('');

        $('.bg_blur').css('backgroundImage', musicList.map(function(item) {
            if (item.music_id == index) {
                return 'url("' + item.music_img + '")'
            }
        }).join(''));
    }

    // 歌曲点击事件
    $('.music_list li').click(function() {
        max_time.innerHTML = "";
        change();
        // 正在播放歌曲高亮
        $('.music_icon').removeClass('active');
        $(this).children().addClass('active');
        var index = $(this).index();
        apply(index);

    })

    // 下一首
    $('#next').click(function() {
        num++;
        change();
        if (num == $('.music_icon').length) {
            num = 0;
        }
        $('.music_icon').removeClass('active');
        $('.music_icon')[num].classList.add('active');
        apply(num);
    })

    // 下一首
    $('#prve').click(function() {
        num--;
        change();
        if (num == -1) {
            num = $('.music_icon').length - 1;
        }
        $('.music_icon').removeClass('active');
        $('.music_icon')[num].classList.add('active');
        apply(num);

    })
})